<template>
  <div class="smart-favorites">
    <!-- 触发按钮 -->
    <el-button 
      class="favorites-trigger"
      :class="{ 'is-open': visible }"
      @click="toggleFavorites"
      circle
    >
      <el-icon><Star /></el-icon>
    </el-button>

    <!-- 收藏夹面板 -->
    <transition name="slide-fade">
      <div v-if="visible" class="favorites-panel">
        <div class="panel-header">
          <h3>
            <el-icon><Star /></el-icon>
            智能收藏夹
          </h3>
          <el-button size="small" text @click="visible = false">
            <el-icon><Close /></el-icon>
          </el-button>
        </div>

        <el-tabs v-model="activeTab" class="favorites-tabs">
          <!-- 我的收藏 -->
          <el-tab-pane label="我的收藏" name="favorites">
            <div class="favorites-list">
              <draggable 
                v-model="myFavorites" 
                item-key="path"
                animation="200"
                handle=".drag-handle"
              >
                <template #item="{ element }">
                  <div class="favorite-item" @click="navigateTo(element.path)">
                    <el-icon class="drag-handle"><Rank /></el-icon>
                    <el-icon class="item-icon" :style="{ color: element.color }">
                      <component :is="element.icon" />
                    </el-icon>
                    <span class="item-title">{{ element.title }}</span>
                    <el-button 
                      class="item-remove"
                      size="small" 
                      text 
                      @click.stop="removeFavorite(element)"
                    >
                      <el-icon><Close /></el-icon>
                    </el-button>
                  </div>
                </template>
              </draggable>

              <el-empty v-if="myFavorites.length === 0" description="暂无收藏" :image-size="80">
                <el-button type="primary" size="small" @click="activeTab = 'recommend'">
                  去添加收藏
                </el-button>
              </el-empty>
            </div>
          </el-tab-pane>

          <!-- AI推荐 -->
          <el-tab-pane name="recommend">
            <template #label>
              <span>
                AI推荐
                <el-icon style="margin-left: 4px; color: #409eff;"><MagicStick /></el-icon>
              </span>
            </template>
            <div class="recommend-section">
              <div class="section-title">
                <el-icon><TrendCharts /></el-icon>
                基于你的使用习惯推荐
              </div>
              <div class="recommend-list">
                <div 
                  v-for="item in recommendations" 
                  :key="item.path"
                  class="recommend-item"
                  @click="navigateTo(item.path)"
                >
                  <el-icon class="item-icon" :style="{ color: item.color }">
                    <component :is="item.icon" />
                  </el-icon>
                  <div class="item-content">
                    <div class="item-title">{{ item.title }}</div>
                    <div class="item-reason">{{ item.reason }}</div>
                  </div>
                  <el-button 
                    size="small" 
                    text 
                    type="primary"
                    @click.stop="addToFavorites(item)"
                  >
                    <el-icon><Star /></el-icon>
                  </el-button>
                </div>
              </div>
            </div>
          </el-tab-pane>

          <!-- 最近访问 -->
          <el-tab-pane label="最近访问" name="recent">
            <div class="recent-list">
              <div 
                v-for="item in recentVisits" 
                :key="item.path"
                class="recent-item"
                @click="navigateTo(item.path)"
              >
                <el-icon class="item-icon">
                  <component :is="item.icon" />
                </el-icon>
                <div class="item-content">
                  <div class="item-title">{{ item.title }}</div>
                  <div class="item-time">{{ formatTime(item.lastVisit) }}</div>
                </div>
                <el-button 
                  size="small" 
                  text
                  @click.stop="addToFavorites(item)"
                >
                  <el-icon><Star /></el-icon>
                </el-button>
              </div>

              <el-empty v-if="recentVisits.length === 0" description="暂无访问记录" :image-size="80" />
            </div>
          </el-tab-pane>

          <!-- 常用功能 -->
          <el-tab-pane label="常用功能" name="common">
            <div class="common-grid">
              <div 
                v-for="item in commonFunctions" 
                :key="item.path"
                class="common-item"
                @click="navigateTo(item.path)"
              >
                <div class="common-icon" :style="{ background: item.gradient }">
                  <el-icon><component :is="item.icon" /></el-icon>
                </div>
                <div class="common-title">{{ item.title }}</div>
                <div class="common-count">使用{{ item.count }}次</div>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </transition>

    <!-- 遮罩层 -->
    <transition name="fade">
      <div v-if="visible" class="favorites-overlay" @click="visible = false"></div>
    </transition>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import draggable from 'vuedraggable'
import {
  Star, Close, Rank, MagicStick, TrendCharts
} from '@element-plus/icons-vue'

const router = useRouter()

const visible = ref(false)
const activeTab = ref('favorites')

// 我的收藏
const myFavorites = ref([
  { path: '/lowcode', title: '低代码平台', icon: 'MagicStick', color: '#667eea' },
  { path: '/contract/list', title: '合同列表', icon: 'Document', color: '#409eff' },
  { path: '/asset/list', title: '资产列表', icon: 'Box', color: '#67c23a' }
])

// AI推荐
const recommendations = ref([
  { 
    path: '/equipment/ledger', 
    title: '设备台账', 
    icon: 'SetUp', 
    color: '#e6a23c',
    reason: '你经常访问设备相关功能'
  },
  { 
    path: '/inventory/products', 
    title: '商品管理', 
    icon: 'Goods', 
    color: '#67c23a',
    reason: '库存模块使用频繁'
  },
  { 
    path: '/reports', 
    title: '综合报表', 
    icon: 'DataBoard', 
    color: '#409eff',
    reason: '你经常查看数据分析'
  }
])

// 最近访问
const recentVisits = ref([
  { path: '/dashboard', title: '工作台', icon: 'Monitor', lastVisit: Date.now() - 300000 },
  { path: '/lowcode/form-designer', title: '表单设计器', icon: 'Edit', lastVisit: Date.now() - 600000 },
  { path: '/contract/list', title: '合同列表', icon: 'Document', lastVisit: Date.now() - 900000 }
])

// 常用功能
const commonFunctions = ref([
  { 
    path: '/lowcode', 
    title: '低代码', 
    icon: 'MagicStick', 
    count: 128,
    gradient: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'
  },
  { 
    path: '/contract/list', 
    title: '合同管理', 
    icon: 'Document', 
    count: 95,
    gradient: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)'
  },
  { 
    path: '/sales/orders', 
    title: '销售订单', 
    icon: 'ShoppingCart', 
    count: 76,
    gradient: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)'
  },
  { 
    path: '/inventory/stock', 
    title: '库存查询', 
    icon: 'Box', 
    count: 68,
    gradient: 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)'
  }
])

// 切换显示
const toggleFavorites = () => {
  visible.value = !visible.value
}

// 导航
const navigateTo = (path) => {
  router.push(path)
  visible.value = false
}

// 添加收藏
const addToFavorites = (item) => {
  const exists = myFavorites.value.find(f => f.path === item.path)
  if (!exists) {
    myFavorites.value.push({
      path: item.path,
      title: item.title,
      icon: item.icon,
      color: item.color || '#409eff'
    })
    ElMessage.success('已添加到收藏')
  } else {
    ElMessage.info('已经在收藏中')
  }
}

// 移除收藏
const removeFavorite = (item) => {
  const index = myFavorites.value.findIndex(f => f.path === item.path)
  if (index !== -1) {
    myFavorites.value.splice(index, 1)
    ElMessage.success('已移除收藏')
  }
}

// 格式化时间
const formatTime = (timestamp) => {
  const date = new Date(timestamp)
  const now = new Date()
  const diff = now - date
  
  if (diff < 60000) return '刚刚'
  if (diff < 3600000) return `${Math.floor(diff / 60000)}分钟前`
  if (diff < 86400000) return `${Math.floor(diff / 3600000)}小时前`
  
  return date.toLocaleString('zh-CN', {
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  })
}
</script>

<style scoped>
.smart-favorites {
  position: relative;
}

.favorites-trigger {
  position: fixed;
  right: 30px;
  bottom: 120px;
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  box-shadow: 0 4px 16px rgba(102, 126, 234, 0.4);
  z-index: 1000;
  transition: all 0.3s;
}

.favorites-trigger:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5);
}

.favorites-trigger.is-open {
  background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
}

.favorites-panel {
  position: fixed;
  right: 20px;
  bottom: 180px;
  width: 380px;
  max-height: 600px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.15);
  z-index: 1001;
  overflow: hidden;
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #e4e7ed;
}

.panel-header h3 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  color: #303133;
}

.favorites-tabs {
  padding: 0 10px;
}

.favorites-list,
.recent-list {
  max-height: 450px;
  overflow-y: auto;
  padding: 10px;
}

.favorite-item,
.recent-item,
.recommend-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  margin-bottom: 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s;
}

.favorite-item:hover,
.recent-item:hover,
.recommend-item:hover {
  background: #ecf5ff;
  transform: translateX(4px);
}

.drag-handle {
  cursor: move;
  color: #c0c4cc;
  font-size: 14px;
}

.item-icon {
  font-size: 20px;
  flex-shrink: 0;
}

.item-title {
  flex: 1;
  font-size: 14px;
  color: #303133;
  font-weight: 500;
}

.item-content {
  flex: 1;
}

.item-reason,
.item-time {
  font-size: 12px;
  color: #909399;
  margin-top: 2px;
}

.item-remove {
  opacity: 0;
  transition: opacity 0.3s;
}

.favorite-item:hover .item-remove {
  opacity: 1;
}

.recommend-section {
  padding: 10px;
}

.section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #606266;
  margin-bottom: 12px;
  padding: 8px 12px;
  background: #f5f7fa;
  border-radius: 6px;
}

.recommend-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.common-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  padding: 10px;
}

.common-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px;
  border-radius: 8px;
  border: 1px solid #e4e7ed;
  cursor: pointer;
  transition: all 0.3s;
}

.common-item:hover {
  border-color: #409eff;
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.2);
  transform: translateY(-3px);
}

.common-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: white;
  margin-bottom: 10px;
}

.common-title {
  font-size: 14px;
  color: #303133;
  margin-bottom: 4px;
}

.common-count {
  font-size: 12px;
  color: #909399;
}

.favorites-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.3);
  z-index: 999;
}

/* 动画 */
.slide-fade-enter-active {
  transition: all 0.3s ease-out;
}

.slide-fade-leave-active {
  transition: all 0.2s ease-in;
}

.slide-fade-enter-from {
  transform: translateY(20px);
  opacity: 0;
}

.slide-fade-leave-to {
  transform: translateY(20px);
  opacity: 0;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

/* 滚动条 */
.favorites-list::-webkit-scrollbar,
.recent-list::-webkit-scrollbar {
  width: 6px;
}

.favorites-list::-webkit-scrollbar-thumb,
.recent-list::-webkit-scrollbar-thumb {
  background: #dcdfe6;
  border-radius: 3px;
}
</style>

